<template>
  <div class="content">
    <div class="home" v-if="isdata === 1" :style="{'background': listData.bg_color}">
    <div class="home_top">
      <img :src="listData.top_pic" alt="">
      <div class="visit">访问人次：{{listData.pv}}</div>
      <van-swipe class="huod_box" vertical :show-indicators = false :autoplay="3000">
        <van-swipe-item class="hsmin" v-for="(suitem, suidx) in success_user" :key="suidx">
          <div class="h_box">
            <img :src="suitem.headimgurl" alt="">
          </div>
          <div class="ht_title">{{suitem.username}}</div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="home_bottom">
      <div class="commodity">
        <div class="time_box" v-if="state !== 4">
          <div class="c_time">{{state === 0 ? '距离活动开始：' : '活动结束倒计时：'}}</div>
          <van-count-down v-if="state === 0" class="c_time"  @finish="finish" :time="startime" format="DD 天 HH 时 mm 分 ss 秒" />
          <van-count-down v-else class="c_time"  @finish="finish" :time="endtimg" format="DD 天 HH 时 mm 分 ss 秒" />
        </div>
        <div class="c_cont">
          <div class="cc_left">
            <img :src="goods.pic" alt="">
          </div>
          <div class="cc_right">
            <div class="c_title">{{goods.name}}</div>
            <div class="crbox">
              <p>价值：<span>{{goods.money}}元</span> </p>
              <p>
                <span v-for="(stoi, stoidx) in goods.stock" :key="stoidx">{{stoi}}</span>
              </p>
              <!-- <p>剩余数量：<span>{{goods.stock}}</span> </p> -->
            </div>
          </div>
        </div>
        <!-- 线 -->
        <div class="line_box" v-show="state === 2 || state === 5">
          <div class="cir cleft" :style="{'background': listData.bg_color}"></div>
          <div class="line"></div>
          <div class="cir cright" :style="{'background': listData.bg_color}"></div>
        </div>
        <!-- 进度 -->
        <div class="speed"  v-if="state === 2">
          <div class="speed_top">
            <p>已砍<span>{{popupData.cut_money}}</span>元， 免费拿仅差</p>
            <div class="speed_tit">
              <div class="title">{{popupData.cut_ratio}}%</div>
              <div class="san"></div>
            </div>
          </div>
          <div class="speed_line">
            <van-progress :percentage="cut_num" stroke-width="10" pivot-text="" pivot-color="#ff423b" color="linear-gradient(to right, #fc9742, #ff423b)"/>
          </div>
        </div>
        <div class="anniu sy" v-show="state === 0">活动未开始</div>
        <div class="anniu hex" v-show="state === 1" @click="wantbtn">我要免费拿</div>
        <div class="btns" v-show="state === 2 && !popupData.shengyu_num">
           <button class="anniu hex" type="button" v-clipboard:copy="set_code" v-clipboard:success="onCopy" v-clipboard:error="onError">邀请好友帮忙砍价</button>
        </div>
        <div class="anniu atree" v-show="state === 2 && popupData.shengyu_num" @click="threebtn">再邀请{{popupData.shengyu_num}}人直接免费拿</div>
        <div class="anniu sy" v-show="state === 3 || state === 4">活动已结束</div>
        <!-- <div class="anniu sy" v-show="state === 4">未砍成功，活动已结束</div> -->
        <div class="state_title" v-show="state === 5">你已成功获得奖品</div>
        <div class="anniu hex" v-show="state === 5" @click="hxbtn">点击核销使用</div>
        <div class="anniu sy" v-show="state === 6">已使用</div>
        <div class="number_box" v-show="state === 2 || state === 5">
          <div class="n_tilte" >已有{{popupData.help_num}}人帮忙砍价</div>
          <div class="userimg" v-for="(imgitem, imgidx) in popupData.user_help" :key="imgidx">
            <avatar :src="imgitem.headimgurl"></avatar>
            <!-- <img :src="imgitem.headimgurl ? imgitem.headimgurl: mimg" alt=""> -->
          </div>
          <div class="more" @click="helpbtn">...</div>
        </div>
      </div>
      <!-- 活动规则 -->
      <div class="rule">
        <div class="rule_top">
          <div class="cirbox">
            <div class="c_one"></div>
            <div class="c_two"></div>
            <div class="c_three"></div>
          </div>
          <div class="active">活动规则</div>
          <div class="cirbox">
            <div class="c_three"></div>
            <div class="c_two"></div>
            <div class="c_one"></div>
          </div>
        </div>
        <div class="rule_title"  v-html="listData.rule"></div>
      </div>
      <!-- 活动介绍 -->
      <div class="rule">
        <div class="rule_top">
          <div class="cirbox">
            <div class="c_one"></div>
            <div class="c_two"></div>
            <div class="c_three"></div>
          </div>
          <div class="active">活动介绍</div>
          <div class="cirbox">
            <div class="c_three"></div>
            <div class="c_two"></div>
            <div class="c_one"></div>
          </div>
        </div>
        <div class="rule_botem" v-html="listData.detail"></div>
      </div>
    </div>
  </div>
  <!-- 没有活动 -->
    <div class="no_conten" v-else-if="isdata === 2">
      <van-empty class="custom-image" :image="noimg" description="暂无活动"/>
    </div>
    <div class="no_conten" v-else>
    </div>
    <!-- 弹框部分 -->
    <!-- 弹框 -->
    <popup v-model="show">
      <!-- 砍价弹框 -->
      <div class="invit_box" v-if="popupData.type === 1">
        <div class="invit_top">自己成功砍掉<span>{{popupData.cut_money}}</span>元</div>
        <div class="incit_cont">
          <!-- :style="{'margin-left': 0 + 'px'}" -->
          <div class="lookjx" :style="{'margin-left': nums + 'px'}">剩余{{popupData.cut_ratio}}%免费拿
            <div class="xsan"></div>
          </div>
          <div class="jdbox">
            <van-progress :percentage="cut_num" pivot-text="" stroke-width="10" pivot-color="#ff423b" color="linear-gradient(to right, #fc9742, #ff423b)"/>
          </div>
        </div>
        <div class="btns">
          <button class="yqbtn" type="button" v-clipboard:copy="set_code" v-clipboard:success="onCopy" v-clipboard:error="onError">邀请好友帮忙砍价</button>
        </div>
      </div>
      <!-- 成功砍掉 一样 -->
      <div class="susser_join" v-else>
        <div class="susser_logo">
          <img :src="popup.headimgurl" alt="">
        </div>
        <div class="s_title">{{popup.username}}</div>
        <!-- <div class="susser_text">成功帮TA砍掉<span>39</span>元</div> -->
        <div class="susser_text">{{popup.text}}</div>
        <div class="s_join" v-show="popup.type === 2 || popup.type === 4" @click="ijoin">我也要参与</div>
        <div class="s_join" v-show="popup.type === 3 || popup.type === 5" @click="lookkanjia">查看我的砍价</div>
      </div>
    </popup>
    <!-- 去微信复制弹框 -->
    <popup v-model="iswx">
      <!-- 复制口令弹框 -->
      <div class="copybox">
        <div class="copyimg">
          <img src="../../assets/copy.png" alt="">
        </div>
        <div class="sharetext">
          <div>分享口令已复制</div>
          <div>去微信粘贴到群或好友邀请砍价</div>
        </div>
        <!-- <button class="wxbtn" type="button" v-clipboard:copy="set_code" v-clipboard:success="onCopy" v-clipboard:error="onError">去微信粘贴</button> -->
        <div class="wxbtn" @click="gowxcopy">
          <img src="../../assets/wx.png" alt="">
          <div>去微信粘贴</div>
        </div>
      </div>
    </popup>
    <!-- 再邀请3人弹框 -->
    <popup v-model="isthree">
      <div class="soon">
        <div class="soon_top">再邀请<span>{{popupData.shengyu_num}}</span>人，即可免费获得奖品</div>
        <div class="soon_speed">
          <div class="lookjx">即将砍成
            <div class="xsan"></div>
          </div>
          <div class="jdbox">
            <van-progress :percentage="pervalue" pivot-text="" stroke-width="10" pivot-color="#ff423b" color="linear-gradient(to right, #fc9742, #ff423b)"/>
          </div>
        </div>
        <div class="soon_img">
          <div class="img_box" v-for="(ibitem, ibidx) in popupData.user_help" :key="ibidx">
            <avatar :src="ibitem.headimgurl"></avatar>
            <!-- <img :src="ibitem.headimgurl ? ibitem.headimgurl: mimg" alt=""> -->
          </div>
          <div class="img_more"  v-clipboard:copy="set_code" v-clipboard:success="onCopy" v-clipboard:error="onError">...</div>
        </div>
        <div class="btns">
          <button class="soonbtn" type="button" v-clipboard:copy="set_code" v-clipboard:success="onCopy" v-clipboard:error="onError">邀请好友帮忙砍价</button>
        </div>
      </div>
    </popup>
     <!-- 二维码 -->
    <popup v-model="iscode">
      <div class="code_box">
        <div class="code_img">
          <img :src="codedata.code" alt="">
        </div>
        <div class="code_title" @click="gotowrite">{{codedata.text}}</div>
      </div>
    </popup>
    <!-- 砍价列表 -->
    <van-popup class="rule_mark"  v-model="isrule" position="bottom">
      <div class="rulebox">
        <div class="r_top">
          <img class="icomimg" src="../../assets/close.png" @click="closebtn" alt="">
        </div>
        <div class="r_conten">
          <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
          <div class="rcbox" v-for="(hitem, hidx) in helpData" :key="hidx">
            <div class="rcb_l">
              <img :src="hitem.headimgurl" alt="">
              <div class="rcb_text">
                <div>{{hitem.username}}</div>
                <div class="times">{{hitem.dateline}}</div>
              </div>
            </div>
            <div class="rcb_r">{{hitem.cut_money}}</div>
          </div>
          </mescroll-vue>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getlist, helpList, selfCut, useQrcode } from '@/api/public'
import Avatar from '@/components/Avatar'
import Popup from './components/popup.vue'
import MescrollVue from 'mescroll.js/mescroll.vue'
import { isAndroid } from '@/utils/system'
export default {
  name: 'Home',
  components: { Popup, MescrollVue, Avatar },
  data () {
    return {
      noimg: require('../../assets/wu.png'),
      isdata: 0,
      show: false,
      iswx: false,
      isthree: false,
      iscode: false,
      listData: {},
      cut_num: '',
      pervalue: 90,
      state: 1,
      showstate: 0,
      isrule: false,
      aid: '',
      uid: '',
      bgcolor: '#fca64a',
      user_join: {},
      goods: {},
      user_help: [],
      helpData: [],
      popupData: {},
      popup: {},
      codedata: {},
      endtimg: '',
      startime: '',
      success_user: [],
      set_code: '',
      btntitle: '',
      nums: 0,
      mescroll: null,
      mescrollDown: {},
      mescrollUp: {
        callback: this.upCallback,
        htmlNodata: '<p class="upwarp-nodata">-- 没有更多了 --</p>',
        dataList: []
      }
    }
  },
  created () {
    if (this.$route.query.aid) {
      this.aid = this.$route.query.aid
      this.uid = this.$route.query.uid
    }
    this.getData()
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
    })
  },
  beforeRouteLeave (to, from, next) {
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
    next()
  },
  methods: {
    getData () {
      const { aid, uid } = this
      getlist(aid, uid).then(res => {
        const { activity, goods, user_join, state, self_join, popup, success_user } = res || {}
        this.isdata = 1
        if (popup) {
          this.show = true
          this.popup = popup
        }
        this.listData = activity
        this.endtimg = activity.end_time * 1000
        this.startime = activity.start_time * 1000
        this.goods = goods
        if (user_join) {
          this.user_join = user_join
        }
        this.state = state
        if (self_join) {
          this.popupData = self_join
          this.cut_num = 100 - self_join.cut_ratio
          this.set_code = self_join.set_code
        }
        if (success_user) {
          this.success_user = success_user
        }
      }).catch(() => {
        this.isdata = 2
      })
    },
    closebtn () {
      this.isrule = false
    },
    closepop () {
      this.show = false
    },
    ijoin () {
      this.state = 1
      this.wantbtn()
    },
    // 我要免费拿
    wantbtn () {
      const { id } = this.listData
      selfCut(id).then(res => {
        this.show = true
        const { popup, set_code } = res || {}
        this.popupData = popup
        this.set_code = set_code
        this.cut_num = 100 - popup.cut_ratio
        this.state = 2
        if (this.cut_num >= 60) {
          this.nums = this.cut_num * 1.32
        } else if (this.cut_num >= 30) {
          this.nums = this.cut_num * 0.7
        } else {
          this.nums = 0
        }
      }).finally(() => {
      })
    },
    // 去微信粘贴
    gowxcopy () {
      const url = isAndroid ? 'com.tencent.mm' : 'weixin://'
      window.QFH5.openApp(url)
      this.iswx = false
    },
    onCopy (e) {
      this.show = false
      this.isthree = false
      this.iswx = true
    },
    // 再邀请3人
    threebtn () {
      this.isthree = true
    },
    // 核销弹框
    hxbtn () {
      const { id } = this.listData
      useQrcode(id).then(res => {
        this.codedata = res
        this.iscode = true
      }).finally(() => {
      })
    },
    // 查看我的砍价
    lookkanjia () {
      this.show = false
      this.isrule = true
    },
    helpbtn () {
      this.isrule = true
    },
    upCallback (page, mescroll) {
      const { num } = page
      const { id } = this.listData
      helpList(num, id).then(res => {
        const { list } = res
        if (num === 1) this.helpData = []
        this.helpData = this.helpData.concat(list)
        this.$nextTick(() => {
          mescroll.endSuccess(list.length)
        })
      }).catch(() => {
        mescroll.endErr()
      })
    },
    mescrollInit (mescroll) {
      this.mescroll = mescroll
    },
    // 去核销页面
    gotowrite () {
      this.$router.push({
        path: '/write'
      })
    },
    onError (e) {
      this.$toast('复制失败')
    },
    finish () {
      this.getData()
    }
  }
}
</script>
<style scoped lang="less">
.content{
  width: 100%;
  min-height: 100vh;
  background-color: white;
  box-sizing: border-box;
  .home{
  width: 100%;
  height: 100%;
  display: flex;
  background: #fca64a;
  flex-direction: column;
  .home_top{
    width: 100%;
    // height: 315px;
    overflow: hidden;
    position: relative;
    img{
      width: 100%;
      height: 100%;
      background-size: cover;
      object-fit: cover;
    }
    .visit{
      padding: 0 10px;
      height: 44px;
      line-height: 44px;
      border-radius: 22px;
      color: white;
      font-size: 22px;
      background-color: rgba(0,0,0,.5);
      position: absolute;
      top: 20px;
      right: 20px;
      box-sizing: border-box;
    }
    .huod_box{
      // width: 320px;
      height: 62px;
      position: absolute;
      bottom: 25px;
      left: 25px;
      .hsmin{
        display: flex;
        align-items: center;
        justify-content: center;
        .h_box{
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 50%;
        z-index: 1;
        img{
          width: 100%;
          height: 100%;
          background-size: cover;
        }
      }
      .ht_title{
        margin-left: -15px;
        padding: 0 15px 0 20px;
        height: 36px;
        line-height: 36px;
        border-radius: 18px;
        color: #666666;
        font-size: 20px;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, .8);
      }
      }
    }
  }
  .home_bottom{
    width: 100%;
    flex: 1;
    padding: 25px;
    overflow: scroll;
    box-sizing: border-box;
    .commodity{
      padding: 30px 0;
      width: 100%;
      // height: 440px;
      background-color: white;
      overflow: hidden;
      box-sizing: border-box;
      border-radius: 10px;
      .time_box{
        display: flex;
        align-items: center;
        justify-content: center;
        .c_time{
          text-align: center;
          font-size: 24px;
          color: #666666;
        }
      }
      .c_cont{
        margin: 30px 20px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        .cc_left{
          width: 168px;
          height: 168px;
          overflow: hidden;
          border-radius: 10px;
          background-color: #f5f5f5;
          img{
            width: 100%;
            height: 100%;
            background-size: cover;
            object-fit: cover;
          }
        }
        .cc_right{
          margin-left: 20px;
          width: 80%;
          height: 168px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          box-sizing: border-box;
          .c_title{
            margin-top: 8px;
            width: 100%;
            color: #222222;
            font-size: 28px;
            line-height: 36px;
            font-weight: bold;
          }
          .crbox{
            margin-bottom: 10px;
            // margin-top: 30px;
            height: 23px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            p{
              font-size: 24px;
              color: #666666;
              span:first-child{
                font-size: 24px;
                color: #666666;
              }
            }
            span{
              font-size: 24px;
              color: #ff4152;
            }
          }
        }
      }
      .line_box{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .cir{
          width: 30px;
          height: 30px;
          background: #fca64a;
          border-radius: 50%;
        }
        .line{
          width: 670px;
          height: 1px;
          background-color: #efefef;
        }
        .cleft{
          margin-left: -15px;
        }
        .cright{
          margin-right: -15px;
        }
      }
      .speed{
        margin-top: 10px;
        box-sizing: border-box;
        .speed_top{
          margin-bottom: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          p{
            color: #222222;
            font-size: 28px;
            letter-spacing: 1px;
            span{
              color: #ff3c3b;
              font-size: 32px;
              font-weight: bold;
              letter-spacing: 2px;
            }
          }
          .speed_tit{
            margin-left: 10px;
            background-color: #ff3c3b;
            width: 100px;
            height: 50px;
            box-shadow: 0px 5px 7px 0px rgba(238, 123, 74, 0.43);
            border-top-right-radius: 25px;
            border-top-left-radius: 5px;
            border-bottom-right-radius: 25px;
            border-bottom-left-radius: 5px;
            position: relative;
            color: #ffffff;
            .title{
              font-size: 24px;
              text-align: center;
              line-height: 50px;
            }
            .san{
              width: 0;
              height: 0;
              margin-left: -10px;
              border-width: 8px;
              border-style: solid;
              border-color: transparent #ff3c3b transparent transparent;
              position: absolute;
              top: 16px;
              left: -6px;
            }
          }
        }
        .speed_line{
          margin: 0 auto;
          width: 650px;
          max-width: 650px;
        }
      }
      .state_title{
        margin-top: 20px;
        text-align: center;
        color: #222222;
        font-size: 28px;
        letter-spacing: 1px;
      }
      .anniu{
        margin: 40px auto 30px;
        height: 88px;
        background-color: #ff4c3b;
        border-radius: 44px;
        font-size: 36px;
        line-height: 88px;
        text-align: center;
        color: white;
        box-sizing: border-box;
      }
      .btns{
        text-align: center;
      }
      .atree{
        width: 500px;
      }
      .hex{
        width: 400px;
      }
      .sy{
        width: 400px;
        background: #bbbbbb;
        color: white;
      }
      .number_box{
        margin: 0 auto 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        .n_tilte{
          margin-right: 40px;
          font-size: 22px;
          color: #666666;
        }
        .userimg{
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-left: -30px;
          background-color: #f5f5f5;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
            background-size: cover;
            object-fit: cover;
          }
        }
        .two{
          background-color: pink;
        }
        .three{
          background-color: red;
        }
        .more{
          width: 60px;
          height: 60px;
          border-radius: 50%;
          margin-left: -30px;
          background-color: #f5f5f5;
          font-size: 36px;
          text-align: center;
          color: #666666;
          z-index: 9;
        }
      }
    }
    .rule{
      margin-top: 20px;
      padding: 26px;
      width: 100%;
      background-color: white;
      border-radius: 10px;
      box-sizing: border-box;
      .rule_top{
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        .active{
          margin: 0 20px;
          font-size: 32px;
          line-height: 29px;
          font-weight: bold;
          color: #222222;
        }
        .cirbox{
          width: 56px;
          height: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .c_one{
            width: 8px;
            height: 8px;
            border-radius: 4px;
            background-color: #ff423b;
            opacity: 0.31;
          }
          .c_two{
            width: 12px;
            height: 12px;
            border-radius: 6px;
            background-color: #ff423b;
            opacity: 0.5;
          }
          .c_three{
            width: 16px;
            height: 16px;
            border-radius: 10px;
            background-color: #ff423b;
            opacity: 0.7;
          }
        }
      }
      .rule_title{
        margin: 20px 0;
        line-height: 50px;
        font-size: 28px;
        color: #444444;
      }
      .rule_botem{
        width: 100%;
        font-size: 28px;
        color: #444444;
      }
      .rule_botem{
        /deep/ img {
          max-width: 100%;
        }
      }
    }
  }
}
  .no_conten{
    width: 100%;
    height: 100%;
  }
   // 弹框
  .invit_box{
    width: 550px;
    height: 420px;
    .invit_top{
      height: 88px;
      background: #ff4c3b;
      color: white;
      text-align: center;
      line-height: 88px;
      font-size: 28px;
      letter-spacing: 1px;
      box-sizing: border-box;
      span{
        font-size: 36px;
        color: #fff373;
        letter-spacing: 2px;
      }
    }
    .incit_cont{
      margin: 48px auto 0px;
      padding: 0 20px;
      box-sizing: border-box;
      .lookjx{
        // margin-left: 10px;
        width: 220px;
        height: 59px;
        line-height: 59px;
        border-radius: 30px;
        font-size: 24px;
        text-align: center;
        background: #ff3c3b;
        color: white;
        box-shadow: 0px 5px 7px 0px rgba(238, 123, 74, 0.43);
        position: relative;
        .xsan{
          width: 0;
          height: 0;
          margin-left: 10px;
          border-width: 8px;
          border-style: solid;
          border-color: #ff3c3b transparent transparent transparent;
          position: absolute;
          bottom: -15px;
          left: 80px;
        }
      }
      .jdbox{
        margin: 20px auto;
        width: 480px;
        height: 27px;
      }
    }
    .btns{
      text-align: center;
      .yqbtn{
        margin: 60px auto 30px;
        width: 300px;
        height: 66px;
        text-align: center;
        border-radius: 33px;
        line-height: 66px;
        font-size: 28px;
        color: #ffffff;
        background: #ff3c3b;
      }
    }
  }
  // 成功 参与
  .susser_join{
    width: 550px;
    height: 440px;
    text-align: center;
    .susser_logo{
      margin: 50px auto 30px;
      width: 110px;
      height: 110px;
      border-radius: 1px solid red;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        background-size: cover;
      }
    }
    .s_title{
      font-size: 24px;
      color: #666666;
    }
    .susser_text{
      margin: 30px 0;
      font-size: 28px;
      color: #222222;
      font-weight: bold;
      letter-spacing: 1px;
      span{
        font-size: 36px;
        color: #ff3c3b;
        letter-spacing: 2px;
      }
    }
    .s_join{
      margin: 60px auto;
      width: 300px;
      height: 66px;
      line-height: 66px;
      font-size: 28px;
      border-radius: 33px;
      background-color: #ff3c3b;
      color: white;
      text-align: center;
      line-height: 66px;
    }
  }
  .copybox{
    width: 550px;
    height: 420px;
    .copyimg{
      margin: 30px auto;
      width: 133px;
      height: 133px;
      border-radius: 50%;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        background-size: cover;
      }
    }
    .sharetext{
      text-align: center;
      font-size: 28px;
      line-height: 40px;
      color: #444444;
    }
    .wxbtn{
      margin: 50px auto;
      width: 300px;
      height: 66px;
      border-radius: 33px;
      background-color: #3fb054;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        margin-right: 10px;
        width: 40px;
        height: 32px;
        background-size: cover;
      }
      div{
        line-height: 66px;
        color: #ffffff;
        font-size: 28px;
      }
    }
  }
   // 即将看成
  .soon{
    width: 550px;
    height: 440px;
    padding: 30px;
    .soon_top{
      font-size: 28px;
      text-align: center;
      letter-spacing: 1px;
      font-weight: bold;
      color: #222222;
      span{
        color: #ff3c3b;
        font-size: 36px;
        letter-spacing: 2px;
      }
    }
    .soon_speed{
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      .lookjx{
        right: 0px;
        width: 151px;
        height: 59px;
        line-height: 59px;
        border-radius: 30px;
        font-size: 24px;
        text-align: center;
        background: #ff3c3b;
        color: white;
        box-shadow: 0px 5px 7px 0px rgba(238, 123, 74, 0.43);
        position: relative;
        .xsan{
          width: 0;
          height: 0;
          margin-left: 10px;
          border-width: 8px;
          border-style: solid;
          border-color: #ff3c3b transparent transparent transparent;
          position: absolute;
          bottom: -15px;
          left: 50px;
        }
      }
      .jdbox{
        margin: 20px auto;
        width: 480px;
      }
    }
    .soon_img{
      margin: 20px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      .img_box{
        margin-right: 10px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        background-color: #f5f5f5;
        img{
          width: 100%;
          height: 100%;
          background-size: cover;
          object-fit: cover;
        }
      }
      .img_more{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #f5f5f5;
        font-size: 36px;
        text-align: center;
        color: #bbbbbb;
      }
    }
    .btns{
      text-align: center;
      .soonbtn{
        margin: 60px auto;
        width: 300px;
        font-size: 28px;
        height: 66px;
        line-height: 66px;
        border-radius: 33px;
        background-color: #ff3c3b;
        color: white;
        text-align: center;
        line-height: 66px;
      }
    }
  }
   // 二维码
  .code_box{
    padding: 60px 0;
    width: 450px;
    height: 440px;
    box-sizing: border-box;
    .code_img{
      margin: 0 auto;
      width: 256px;
      height: 256px;
      img{
        width: 100%;
        height: 100%;
        background-size: cover;
      }
    }
    .code_title{
      margin-top: 40px;
      text-align: center;
      font-size: 28px;
      font-weight: bold;
      color: #222222;
    }
  }
  // 排行
  .rule_mark{
    width: 100%;
    height: 1000px;
    background-color: white;
    border-radius: 20px 20px 0px 0px;
    box-sizing: border-box;
    .rulebox{
      padding:20px 20px 0;
      background-color: white;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .r_top{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .icomimg{
          width: 44px;
          height: 44px;
        }
      }
      .r_conten{
        width: 100%;
        background-color: white;
        flex: 1;
        overflow: scroll;
        .rcbox{
          margin-top: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 97px;
          padding-bottom: 20px;
          border-bottom: 1px solid #efefef;
          box-sizing: border-box;
          .rcb_l{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            img{
              width: 76px;
              height: 76px;
              border-radius: 50%;
              background-size: cover;
              object-fit: cover;
            }
            .rcb_text{
              text-align: left;
              margin-left: 20px;
              color: #222222;
              font-size: 28px;
              .times{
                margin-top: 10px;
                font-size: 22px;
                color: #666666;
              }
            }
          }
          .rcb_r{
            font-size: 28px;
            font-weight: bold;
            color: #ff3730;
          }
        }
      }
    }
  }
}

</style>
